import './Login.less';

import React from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import { Input, Button, Form, Icon } from 'antd';
import * as UserAction from 'actions/UserAction';

const { Component } = React;
const FormItem = Form.Item;

class Login extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        this.props.dispatch(UserAction.login(values)).then(res => {
          if (res.username) this.props.history.push('/');
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={ this.handleSubmit } className='login-form'>
        <img src='/images/logo.png' />
        <FormItem>
          { getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入账号!' }],
          })(
            <Input prefix={ <Icon type='user' style={ { color: 'rgba(0,0,0,.25)' } } /> } placeholder='账号' />,
          ) }
        </FormItem>
        <FormItem>
          { getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码!' }],
          })(
            <Input prefix={ <Icon type='lock' style={ { color: 'rgba(0,0,0,.25)' } } /> } placeholder='密码' />,
          ) }
        </FormItem>
        <Button type='primary' htmlType='submit' className='login-form-button'>登陆</Button>
      </Form>
    );
  }
}

function mapStateToProps(state) {
  return {}
}

export default withRouter(connect(mapStateToProps)(Form.create()(Login)));